<template>
  <div>
    <BasicTable @register="registerTable">
      <template #tableTitle>
        <a-button preIcon="ant-design:plus-outlined" type="primary" @click="handleAdd" style="margin-right: 5px">添加</a-button>
      </template>
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" />
      </template>
      <template #logo="{ record }">
        <div class="idp-logo" @click="handleEdit(record)">
          <Image :src="record.logo" :preview="false" :width="45" />
          <div>
            <a-button type="link">{{ record.name }}</a-button>
          </div>
        </div>
        
      </template>
    </BasicTable>
    <IdpTmplList @register="registerIdpTmplList" @success="handleSaveIdp" />
  </div>
</template>
<script lang="ts" name="ext-idp-template-list" setup>
  import { ref } from "vue"
  import { Image } from "ant-design-vue"

  import { BasicTable, TableAction, ActionItem } from "/@/components/Table"
  import { useDrawer } from "/@/components/Drawer"
  import * as extIdpApi from "/@/api/iam/extIdp"
  import { columns, searchFormSchema } from "./data"
  import IdpTmplList from "./tmpl/IdpTmplList.vue"
  import { useMessage } from "/@/hooks/web/useMessage"
  import { useListPage } from "/@/hooks/system/useListPage"
  import { useModal } from "/@/components/Modal"
  import { useGo } from "/@/hooks/web/usePage"
  const [registerIdpTmplList, { openModal: openIdpTmplList }] = useModal()
  const { createMessage } = useMessage()
  const go = useGo()
  const { prefixCls, tableContext} = useListPage({
    designScope: "ext-ldp-list",
    tableProps: {
      title: "身份源列表",
      bordered: false,
      api: extIdpApi.listIdp,
      actionColumn: {
        width: 80,
        title: "操作",
        dataIndex: "action",
        fixed: "right",
        slots: { customRender: "action" },
      },
      useSearchForm: false,
      pagination: false,
      columns: columns
    },
  })
  const [registerTable, { reload }, { selectedRowKeys }] = tableContext

  function getTableAction(record) {
    return [
      {
        label: "删除",
        color: "error",
        popConfirm: {
          title: `是否确认删除 ${record.name}`,
          confirm: handleDelete.bind(null, record),
        },
      }
    ]
  }

  function handleAdd() {
    openIdpTmplList(true, {})
  }

  async function handleDelete(record) {
    await extIdpApi.deleteIdp({ id: record.id })
    reload()
  }

  const handleSaveIdp = async (idpTmplId) => {
    await extIdpApi.saveIdp({ idpTmplId: idpTmplId})
    reload()
  }

  const handleEdit = (record) => {
    go('/auth/extIdp/connect/' + record.id)
  }
</script>

<style lang="less" scoped>

.idp-logo {
  display: flex;
  justify-items: center;
  align-items: center;
  cursor: pointer;
}
</style>
